<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{ padding: 0;margin:0; list-style: none; }
		.clearfix:after{ content: ''; clear:both; display:  block; }
		li{ width: 100px; height: 30px;box-sizing: border-box; text-align: center; line-height: 30px; border:1px solid red; float: left; }
		p{ width: 300px; height: 300px; background: blue; text-align: center;; font-size: 50px; line-height: 300px; display: none; }
		.active{ background: red; }
		.show{ display: block; }
	</style>
	<script>
		function taba(){
			this.tab=document.querySelector('.tab');
			this.li=this.tab.querySelectorAll('li');
			this.p=this.tab.querySelectorAll('p');
			var This=this;
			for(var i=0;i<this.li.length;i++){
				this.li[i].index=i;
				this.li[i].onclick=function(){
					This.change(this.index)
				}
			}
		}
		taba.prototype.change=function(n){
			for(var i=0;i<this.li.length;i++){
				this.li[i].className='';
				this.p[i].className='';
			}
			this.p[n].className='show';
			this.li[n].className='active';
		}
		

		
	</script>
</head>
<body>
	<div class="tab">
		<ul class="clearfix">
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<p class="show">1</p>
		<p>2</p>
		<p>3</p>
	</div>
	<script>
		var tab1=new taba()
	</script>
</body>
</html>

